<template>
  <div class="edit-component">
    <el-form :inline="true" :model="formData" :rules="validatorRules" ref="formData">
      <el-form-item label="任务名称" prop="title">
        <el-input v-model="formData.title" maxlength="20" placeholder="请输入任务名称"></el-input>
      </el-form-item>
	  <el-form-item label="任务类型" prop="type">
	    <el-select v-model="formData.type" placeholder="请选择任务类型">
	        <el-option v-for="item in taskTypeList" :label="item.name" :value="item.id" :key="item.id"></el-option>
	    </el-select>
	  </el-form-item>
      <el-form-item label="执行人" prop="operatorName">
        <el-input v-model="formData.operatorName"  placeholder="请选择执行人(点击右侧加号)" suffix-icon="" readonly :validate-event="false">
			<i slot="suffix" class="icon el-icon-circle-plus-outline" @click="openSelector"></i>
		</el-input>
      </el-form-item>
	  <el-form-item label="起点经纬度" prop="startPosition">
	    <el-input v-model="formData.startPosition"  placeholder="请标注(点击右侧图标)" readonly suffix-icon=""  :validate-event="false">
			<i slot="suffix" class="icon el-icon-map-location" @click="openMap(formData.startPosition,1)"></i>
		</el-input>
	  </el-form-item>
	  <el-form-item label="终点经纬度" prop="endPosition">
	    <el-input v-model="formData.endPosition"  placeholder="请标注(点击右侧图标)" suffix-icon="" readonly :validate-event="false">
			<i slot="suffix" class="icon el-icon-map-location" @click="openMap(formData.endPosition,2)"></i>
		</el-input>
	  </el-form-item>
	  <el-form-item label="中点1经纬度" prop="midOnePosition">
	    <el-input v-model="formData.midOnePosition"  placeholder="请标注(点击右侧图标)" suffix-icon="" readonly :validate-event="false">
			<i slot="suffix" class="icon el-icon-map-location" @click="openMap(formData.midOnePosition,3)"></i>
		</el-input>
	  </el-form-item>
	  <el-form-item label="中点2经纬度" prop="midTwoPosition">
	    <el-input v-model="formData.midTwoPosition"  placeholder="请标注(点击右侧图标)" suffix-icon=""  :validate-event="false">
			<i slot="suffix" class="icon el-icon-map-location" @click="openMap(formData.midTwoPosition,4)"></i>
		</el-input>
	  </el-form-item>
	  <el-form-item label="任务描述" prop="content" class="textarea">
	    <el-input type="textarea" v-model="formData.content" maxlength="200" placeholder="最多可输入200字" show-word-limit autosize></el-input>
	  </el-form-item>
    </el-form>
    <div class="button-bar">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
    </div>
	<userSelector class="uselector"  ref="userSelector" :initData="checkedUserData" @output="checkedUser"></userSelector>
	<el-dialog class="daka" title="打卡范围标记" :visible.sync="showDialog" append-to-body>
		<lmap name="" :showPoint="showPoint" @setValue="getPoint" :isClick="true"></lmap>
		<div slot="footer" class="footer">
			<el-button size="mini" @click="cancelMap">取 消</el-button>
			<el-button size="mini" type="primary" @click="confirmMap">确 定</el-button>
		</div>
	</el-dialog>
  </div>
</template>
<script>
import userSelector from "@/components/userSelector"
import lmap from "@/components/map/LMapClick.vue"
export default {
	components:{userSelector,lmap},
    props:{
      rowId:{
        type:String,
        default:"",
        required:true,
      },
	  taskTypeList:Array,
	  taskStatusList:Array
    },
    data(){
      return{
        formData:{
          id:'',
          title:'',
          operatorName:'',
		  operatorId:"",
		  type:"",
          content:'',
		  startPosition:'',
		  endPosition:'',
		  midOnePosition:'',
		  midTwoPosition:'',
        },
        validatorRules:{
          title:[
            {required: true, message: '请输入任务名称', trigger: 'blur'},
          ],
          type:[
            {required: true, message: '请选择任务类型', trigger: 'blur'},
          ],
		  operatorName:[
		    {required: true, message: '请选择执行人', trigger: 'blur'},
		  ],
		  startPosition:[
		    {required: true, message: '请标记点位', trigger: 'blur'},
		  ],
		  endPosition:[
		    {required: true, message: '请标记点位', trigger: 'blur'},
		  ],
		  midOnePosition:[
		    {required: true, message: '请标记点位', trigger: 'blur'},
		  ],
		  midTwoPosition:[
		    {required: true, message: '请标记点位', trigger: 'blur'},
		  ],
        },
		showDialog:false,
		showPoint:"",
		pointIndex:1,
		btnLoading:false,
      }
    },
    watch:{
      rowId(vv){
		  if(vv){
			  this.initFormData()
		  }else{
			  for(var key in this.formData){
				  this.formData[key]=""
			  }
		  }
      }
    
    },
	computed:{
		checkedUserData(){
			var checkUser=[];
			if(this.formData.operatorId){
				let names=this.formData.operatorName.split(",");
				this.formData.operatorId.split(",").forEach((item,index)=>{
					checkUser.push({
						id:item,
						name:names[index]
					})
				})
			}
			return checkUser;
		}
	},
    methods:{
		initFormData(){
			if(!this.rowId){
				return
			}
			this.$http.taskDetail({id:this.rowId})
			.then((res)=>{
				var data=res.data.data ||{};
				this.formData=data;
			}).catch((err)=>{
				throw(err)
			})
		},
		
      submit(){
        var isValidate=false
        this.$refs.formData.validate((bool)=>{
            isValidate=bool
        })
        if(!isValidate){return}
        let submitData=this.formData;
        this.btnLoading=true
        this.$http.taskEdit(submitData)
        .then((res)=>{
          this.$message.success("操作成功！")
          this.resetForm()
          this.$emit("refresh")
          this.$emit('closeDialog',false)
		  this.btnLoading=false
        }).catch((err)=>{
			this.btnLoading=false
           throw(err)
        })
        
      },

      resetForm(){
        this.$refs.formData.resetFields()
        for(var key in this.formData){
            this.formData[key]=""
        }
      },

      cancel(){
        this.resetForm()
        this.$emit("refresh")
        this.$emit('closeDialog',false)
      },

	  openSelector(){
		  this.$refs.userSelector.showDialog=true;
	  },
	  
	  checkedUser(users){
		  var ids=users.map((item)=>{
			  return item.id
		  }).toString()
		  var names=users.map((item)=>{
			  return item.name
		  }).toString()
		  this.$set(this.formData,"operatorId",ids)
		  this.$set(this.formData,"operatorName",names)
	  },
	  
	  
	  cancelMap(){
		  this.showDialog=false
	  },
	  
	  confirmMap(){
		  this.showDialog=false
	  },
	  
	  openMap(point,index){
		  this.showDialog=true
		  this.pointIndex=index
		  this.$nextTick(()=>{
			  this.showPoint=point;
		  })
	  },
	  
	  getPoint(point){
		  switch(this.pointIndex){
			  case 1:this.formData.startPosition=point;break;
			  case 2:this.formData.endPosition=point;break;
			  case 3:this.formData.midOnePosition=point;break;
			  case 4:this.formData.midTwoPosition=point;break;
			  default:this.formData.startPosition=point;break;
		  }
		  
	  },
	  
    },
	created() {
		this.initFormData()
	}

    
  }
</script>
<style scoped lang='scss'>
#clickMap{
	flex:1;
}

.daka{
	/deep/ .el-dialog__footer{
		position: relative;
		padding-top: 0px;
		top: -10px;
		padding-bottom: 5px;
		text-align: center;
		.footer{
			position: absolute;
			bottom: 20px;
			z-index: 1111;
			right: 0px;
			left: 0px;
		}
	}
}


/deep/ .el-input--suffix .el-input__inner{
	padding-right:40px;
}
</style>


